<!-- FooterComponent.vue -->
<template>
    <footer class="site-footer">
        <div class="footer-content">
            <!-- 运行时间显示 -->
            <div class="runtime">
                <span>已运行 {{ formattedRuntime }}</span>
            </div>

            <!-- 导航链接 -->
            <nav class="footer-nav">
                <a v-for="(link, index) in links" :key="index" :href="link.url">{{ link.text }}</a>
            </nav>

            <!-- 版权信息 -->
            <div class="copyright">
                &copy; {{ copyrightYear }} {{ companyName }}
                <span v-if="recordNumber"> | {{ recordNumber }}</span>
            </div>
        </div>
    </footer>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'

const props = defineProps({
    copyrightYear: {
        type: Number,
        default: new Date().getFullYear()
    },
    companyName: {
        type: String,
        required: true
    },
    recordNumber: String,
    links: {
        type: Array,
        default: () => [
            { text: '联系我', url: 'https://space.bilibili.com/357358593?spm_id_from=333.1007.0.0' },
            { text: '隐私政策', url: '/privacy' },
            { text: '免责声明', url: 'https://www.galgalgal.top/article/detail/27' }
        ]
    },
    // 新增网站上线日期属性
    launchDate: {
        type: [Date, String],
        default: '2023-01-01' // 默认日期，可以在组件使用时传入实际上线日期
    }
})

// 运行时间逻辑
const websiteStartTime = ref(null)
const currentTime = ref(new Date())
let timer = null

const formatDuration = (seconds) => {
    const days = Math.floor(seconds / (3600 * 24))
    const hours = Math.floor((seconds % (3600 * 24)) / 3600)
    const minutes = Math.floor((seconds % 3600) / 60)
    const secs = Math.floor(seconds % 60)
    return `${days}天 ${hours}时 ${minutes}分 ${secs}秒`
}

const formattedRuntime = computed(() => {
    if (!websiteStartTime.value) return '0天 0时 0分 0秒'
    const diff = Math.floor((currentTime.value - websiteStartTime.value) / 1000)
    return formatDuration(diff)
})

onMounted(() => {
    // 使用props中传入的网站上线日期
    websiteStartTime.value = new Date(props.launchDate)

    // 设置定时器更新当前时间
    timer = setInterval(() => {
        currentTime.value = new Date()
    }, 1000)
})

onUnmounted(() => {
    clearInterval(timer)
})
</script>

<style scoped>
.site-footer {}

.footer-content {
    /* 添加透明度 */
    padding: 8px 20px;
    /* 减小上下padding，降低高度 */
    margin-top: auto;
    border-radius: 20px;
    /* 顶部圆角 */
    box-shadow: 0 -2px 20px rgba(158, 255, 174, 0.5);
    /* 轻微的阴影效果 */
    backdrop-filter: blur(5px);
    /* 背景模糊效果 */
    background-color: rgba(245, 245, 245, 0.8);
    width: 80%;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* 使用gap控制元素间距，更加紧凑 */
}

.footer-nav {
    margin: 5px 0;
    /* 减小边距 */
}

.footer-nav a {
    color: #666;
    text-decoration: none;
    margin: 0 10px;
    font-size: 0.9em;
    /* 稍微减小字体 */
    transition: color 0.2s ease;
    /* 添加过渡效果 */
}

.footer-nav a:hover {
    color: #333;
    text-decoration: underline;
    /* 悬停时添加下划线 */
}

.copyright {
    color: #666;
    font-size: 0.85em;
}

.runtime {
    color: #666;
    font-size: 0.85em;
    margin-bottom: 2px;
    /* 减小底部间距 */
}

/* 适配移动设备 */
@media (max-width: 768px) {
    .site-footer {
        padding: 10px;
    }

    .footer-nav a {
        margin: 0 5px;
        font-size: 0.85em;
    }
}
</style>